<template>
	<view class="coupons">
        <view class="coupons-view" @click="couponsShow = true" v-if="couponsList && couponsList.length">
            <view>
                <text class="bold-text">领券</text>
            </view>
            <view class="content-view u-margin-left-20">
                <u-tag style="min-width: 110rpx;text-align: center;" v-for="(coupon, index) in couponsList" :key="index" v-if="index < 2" class="u-line-1 u-margin-right-10" :text="'满' + coupon.coupon_threshold_price + '减' + coupon.coupon_price" type="error" mode="dark" shape="circle" />
            </view>
            <view>
                <u-icon class="collection-icon u-margin-right-10" name="more-dot-fill" size="36"></u-icon>
            </view>
        </view>
        <!-- 优惠券弹出层 -->
        <u-popup v-model="couponsShow" mode="bottom" length="70%" border-radius="20" :safe-area-inset-bottom="true" closeable close-icon-size="20">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                优惠券
            </view>
            <scroll-view scroll-y="true" style="height: calc(100vh - 240px);">
                <view class="coupons-list-view" v-for="(coupon, index) in couponsList" :key="index">
                    <view class="left">
                        <view class="sum u-line-1">
                            ￥
                            <text class="num">{{ coupon.coupon_price  }}</text>
                        </view>
                        <view class="type u-font-22">满{{ coupon.coupon_threshold_price }}元可用</view>
                    </view>
                    <view class="right u-line-1 u-flex-1" @click="handleReceiveCoupon(coupon)">
                        <view class="top">
                            <view class="title u-line-1">
                                <!-- <u-tag text="限自营" mode="dark" type="error" shape="circle" /> -->
                                <text>{{ coupon.title }}</text>
                            </view>
                            <view class="bottom">
                                <view class="date">{{ coupon.start_time | date }} 至 {{ coupon.end_time | date }}</view>
                                <view class="immediate-use">
                                    <text class="coupon-btn">点击领取</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </u-popup>
	</view>
</template>

<script>
    /**
     * 商品详情页优惠券组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     */
    import * as API_Members from '@/api/members.js'
    import * as API_Promotions from '@/api/promotions.js'
	export default {
		data() {
			return {
                couponsShow: false,
				couponsList: [],
                couponsAll: []
			};
		},
        props: {
            goodsId: {
                type: String,
                default: ''
            },
            selectedSku: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        watch: {
            goodsId: function (val) {
                this.getOwnCoupons()
            },
            selectedSku: function (val) {
                if (!this.couponsAll || !this.couponsAll.length) return
                const sku_coupons = this.couponsAll.find(key => key.sku_id === val.sku_id).coupon_list
                this.couponsList = sku_coupons
            }
        },
        methods: {
            //优惠券
            getOwnCoupons() {
                API_Promotions.getOwnCoupons(this.goodsId).then(response => {
                    this.couponsAll = response
                    setTimeout(() => {
                        if (this.selectedSku && response) {
                            const sku_coupons = response.find(key => key.sku_id === this.selectedSku.sku_id).coupon_list
                            this.couponsList = sku_coupons
                        }
                    },500)
                })
            },
            //领取优惠券
            handleReceiveCoupon(coupon) {
                this.judgeLogin(() => {
                    API_Members.receiveCoupons(coupon.coupon_id).then(response => {
                        uni.showToast({
                            title: '领取成功',
                            duration: 2000
                        })
                    })
                })
            }
        },
        mounted() {
            this.getOwnCoupons()
        },

	}
</script>

<style lang="scss" scoped>
    .coupons-view {
        padding: 30rpx;
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        background-color: #FFFFFF;
        .left-view {
            margin-right: 20rpx;
        }
        .bold-text {
            font-weight: bold;
        }
        .content-view {
            flex: 1;
        }
    }
    //优惠券弹出框
    .coupons-list-view {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        margin: 0 20rpx 20rpx;
        background-color: #F3F4F6;
        /deep/ .u-size-default {
            padding: 8rpx 20rpx;
        }

        .left {
            padding: 30rpx 20rpx;
            background: linear-gradient(to right, #5994EC 0%, #3248F2 100%);
            text-align: center;
            font-size: 28rpx;
            color: #ffffff;
            width: 252rpx;
            position: relative;
            overflow: hidden;
            ::before {
                content: ' ';
                width: 0;
                height: 100%;
                position: absolute;
                /* 小球形状 */
                border-right: 8rpx dotted white;
                left: -2rpx;
                top: 0;
            }

            .sum {
                font-weight: bold;
                font-size: 32rpx;

                .num {
                    font-size: 80rpx;
                }
            }
        }

        .right {
            padding: 20rpx 10rpx;
            font-size: 28rpx;

            .top {

                .title {
                    font-size: 24rpx;
                    font-weight: 600;
                }

                .bottom {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    padding-top: 80rpx;

                    .date {
                        font-size: 20rpx;
                        flex: 1;
                        margin-right: 6rpx;
                    }
                    .coupon-btn {
                        display: inline-flex;
                        font-size: 20rpx;
                        height: 50rpx;
                        line-height: 50rpx;
                        padding: 0 12rpx;
                        color: #ffffff;
                        border-radius: 100rpx;
                        background: linear-gradient(to right, #5994EC 0%, #3248F2 100%);
                    }
                }
            }
        }
    }
</style>
